<template>
<el-dialog class="dialog" v-model="store.searchChatRoomIsView" width="800" @close="clear">
    <h1>搜索聊天室</h1>
    <hr />
    <el-row style="height: 60px" class="el-row">
      <el-input
        v-model="userInput"
        placeholder="请输入您想要搜索的聊天室名称"
        class="custom-input"
        clearable
      >
        <template #append>
          <el-button @click="searchChatRoom"
            ><el-icon style="margin-top: -5px"><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
    </el-row>
    <el-row  v-for="item in store.chatRoomList" :key="item.chatRoomName" class="el-row">
      <el-col :span="21" style="font-size: 20px">{{ item.chatRoomName }}</el-col>
      <el-col :span="3"> <el-button type="primary"  @click="joinChatRoom(item.id)">加入聊天室</el-button> </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup>
import { publicMessage } from "@/store";
import { ref } from "vue";
import api  from '@/api/service'

const store = publicMessage();
const userInput = ref(null);
const searchChatRoom = ()=>{
    api.searchChatRoom(userInput.value);
}
const clear = ()=>{
    userInput.value = null;
    store.chatRoomList = null;
}
const joinChatRoom = (chatRoomId)=>{
    api.joinChatRoom(chatRoomId);
    location.reload(); //浏览器刷新
}
</script>
<style scoped>
.dialog{
    padding-bottom: 20px;
}
.custom-input {
  font-size: 32px; /* 设置字体大小 */
  height: 55px;
}
.el-row {
  margin-bottom: 20px;
}
</style>